<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/discuss.css}">
    <script th:src="@{/js/jqPaginator.js}"></script>

    <title>讨论 - 倪风的博客</title>
    <style>
        .listsort .active {
            background-color: #00a1d6 !important;
        }
        .listsort li:hover{
            background-color: #00a1d6 !important;
        }
        .listsort {
            margin: 0 10px;
            padding: 0px;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .listsort li {
            float: left;
            position: relative;
            height: 35px;
            list-style: none;
            line-height: 35px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
            margin-right: 20px;
        }

        .listsort a {
            text-decoration: none;
        }

        .listsort li a {
            display: block;
            width: 100%;
            padding: 0px 10px;
            color: #eeeeff;
            font-weight: normal;
        }
    </style>
</head>
<body>
<div th:replace="index/command :: nav"></div>


<div class="container">
    <ul class="listsort  container">
        <li><a id="category-0" href="/discuss">全部</a></li>
        <li>
            <a id="category-1" href="/discuss/?askSort=1">提问</a>
        </li>
        <li>
            <a id="category-2" href="/discuss/?askSort=2">分享</a>
        </li>
        <li>
            <a id="category-3" href="/discuss/?askSort=3">讨论</a>
        </li>
        <li>
            <a id="category-4" href="/discuss/?askSort=4">建议</a>
        </li>
        <li>
            <a id="category-5" href="/discuss/?askSort=5">BUG</a>
        </li>
    </ul>
    <script>
        var askSort=[[${askSort}]]
        if (askSort==null||askSort==0){
            $("#category-0").parent("li").addClass("active");
        }else if (askSort==1){
            $("#category-1").parent("li").addClass("active");
        }else if (askSort==2){
            $("#category-2").parent("li").addClass("active");
        }else if (askSort==3){
            $("#category-3").parent("li").addClass("active");
        }else if (askSort==4){
            $("#category-4").parent("li").addClass("active");
        }else if (askSort==5){
            $("#category-5").parent("li").addClass("active");
        }
    </script>
    <div class="main">
        <div class="col-md-9 col-sm-12 col-xs-12">
            <ul style="background-color:white">
                <div style="padding: 10px 20px;">
                    <h3 style="margin: 10px 0"><span class="glyphicon glyphicon-th-list"></span>发现</h3>
                    <a type="button" class="btn btn-primary" style="float: right" href="/discuss/ask"><span class="glyphicon glyphicon-edit"></span> 发布问题</a>
                    <ul class="nav nav-tabs">
                        <li role="presentation" id="new" class=""><a th:href="|/discuss/?sort=new&askSort=${askSort}|">最新</a></li>
                        <li role="presentation" id="hot" class=""><a th:href="|/discuss/?sort=hot&askSort=${askSort}|">最热</a></li>
                    </ul>
                </div>
                <li class="boxContent" th:each="ask : ${asks}" style="padding-bottom: 3px;">
                    <div>
                        <div class="user_bar">
                            <div style="display: inline-block;float: left;">
                                <a th:href="|/person/${ask.uid}|" style="text-decoration: none;height: 45px;width: 45px;">
                                    <img th:src="${ask.img}" alt="" style="height: 45px;width: 45px;border-radius: 10px;">
                                </a>
                            </div>
                            <div class="floatR" style="">
                                <a th:href="|/question/${ask.id}|"><div class="title" style="display: inline-block;" th:text="${ask.title}">李宏毅 机器学习笔记-02 Regression</div></a>
                                <div style="font-size: 13px;margin-top: 2px;">
                                    <span><span th:text="${ask.name}"></span></span>
                                    <span>• 游览量：<span th:text="${ask.visit}"></span></span>
                                    <span>• 发布于：<span th:text="${#dates.format(ask.create_date,'yyyy-MM-dd HH:mm')}"></span></span>
                                    <span style="float: right;font-size: 12px;" th:text="${ask.asksort}">分享</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!--        <p id="p2"></p>-->
            <ul class="pagination" id="pagination2"></ul>
            <script type="text/javascript">
                $.jqPaginator('#pagination2', {
                    totalPages: [[ ${pages} ]],//总页数
                    visiblePages: 6,//显示数
                    currentPage: [[ ${page} ]],//默认当前为第几页
                    prev: '<li class="prev"><a href="/discuss/?page=[[ ${page}-1 ]]&sort=[[ ${sort} ]]&askSort=[[ ${askSort} ]]">上一页</a></li>',
                    next: '<li class="next"><a href="/discuss/?page=[[ ${page}+1 ]]&sort=[[ ${sort} ]]&askSort=[[ ${askSort} ]]">下一页</a></li>',
                    page: '<li class="page"><a href="/discuss/?page={{page}}&sort=[[ ${sort} ]]&askSort=[[ ${askSort} ]]" class="test2">{{page}}</a></li>',
                    onPageChange: function (num, type) {
                        // window.location.href="/discuss/?page="+num+"&sort=[[ ${sort} ]]"
                        // alert(num)
                        // $('#p2').text(type + '：' + num);
                    }
                });

                if ([[ ${page} ]]===[[ ${pages} ]]){
                    $(".next a").attr("href","javascript:;");
                }
                if ([[ ${page} ]]===1){
                    $(".prev a").attr("href","javascript:;");
                }


                $(document).ready(function(){

                });

                if ("[[ ${sort} ]]"==="new" || "[[ ${sort} ]]"===""||"[[ ${sort} ]]"==null){
                    $("#new").attr("class","active")
                }else if ("[[ ${sort} ]]"==="hot"){
                    $("#hot").attr("class","active")
                }

            </script>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12 main-right">

            <div class="site-host">
                <div class="siteFont">站长:</div>
                <a href="https://weibo.com/3244508967" title="新浪微博"><img class="adminicon" src="/images/weibo.jpg"></a>
                <a href="https://user.qzone.qq.com/194908655" title="QQ空间"><img class="adminicon" src="/images/kongjian.png"></a>
                <a href="https://github.com/nifeng6" title="Github"><img class="adminicon" src="/images/GitHub.png"></a>
            </div>
            <div style="border-bottom: 1px solid #eee;padding: 0;" class="col-lg-12 col-sm-12 col-xs-12">
                <div id="myCarousel" class="carousel slide thumbnail">

                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner ">
                        <div class="item active">
                            <img style="height: 130px;" src="http://www.mitu.cn/_upload/article/images/74/b4/a10d8df84e5d966fa7128029869a/2c279ebc-2b12-4c72-affd-59f8a2f633fb.jpg" alt="First slide">
                        </div>
                        <div class="item">
                            <img style="height: 130px;" src="http://www.mitu.cn/_upload/article/images/a4/34/27d57e204dfea76ba693e096792f/11506614-40e4-4195-a5bc-7a8ab607dd95.jpg" alt="Second slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div>
                <span style="font-size: 14px;">🔥热门标签:</span>
                <div style="padding-bottom: 20px;border-bottom: 1px solid #eee;">
                    <div class="hot_tag" th:each="tag : ${tags}">
                        <div><a class="tagname" href="javascript:;"><span th:text="${tag.name}">java</span></a></div>
                    </div>


                </div>
            </div>

            <div>
                <span style="font-size: 14px;">🏃最新用户:</span>
                <div style="border-bottom: 1px solid #eee;">
                    <ul class="list-group" style="    margin-top: 10px;">
                        <li th:each="LimitUser : ${LimitUsers}" class="list-group-item" style="list-style: none;">
                            <a style="margin-right: 5px;" th:href="|/person/${LimitUser.id}|"><img class="img-rounded" width="30" th:src="${LimitUser.img}"></a>
                            <small style="font-size: 13px;color: #303030;" th:text="${LimitUser.name}"></small>
                            <small></small>
                            <small style="float: right;font-size: 11px;color: #666;">问题:&nbsp;&nbsp; <span class="iconfont icon-fensi2"></span>0</small>
                        </li>

                    </ul>
                </div>
            </div>

            <div>
                <span style="font-size: 14px;">🔥热门推荐:</span>
                <div style="border-bottom: 1px solid #eee;padding-bottom: 20px;">
                    <ul class="list-group rightlist" id="recommend_wrapper" style="margin: 0px;padding: 0px;">
                        <li th:each="hotByHot:${hotByDis}" class="list-group-item"><a title="查看全文" th:href="|/question/${hotByHot.id}|" th:text="${hotByHot.title}">马上就要开学了,我的暑假作业还没写完啥办??</a></li>
                    </ul>
                </div>
            </div>

            <div>
                <span style="font-size: 14px;">⏰最近更新:</span>
                <div style="padding-bottom: 20px;">
                    <ul class="list-group rightlist" style="margin: 0px;padding: 0px;">
                        <li th:each="dateByNew : ${dateByDis}" class="list-group-item"><a title="查看全文" th:href="|/question/${dateByNew.id}|" th:text="${dateByNew.title}">马上就要开学了,我的暑假作业还没写完啥办??</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    $(".navtitle").each(function () {
        if ($(this).text()=="问答"){
            $(this).addClass("active")
        }
    })
</script>

<div th:replace="index/command :: footer"></div>
</body>
</html>